@model Wiwi.ViewModels.Registration

@{
    ViewBag.Title = "Register";
    var HomeDir = System.Configuration.ConfigurationManager.AppSettings["HomeDirectory"].ToString(); 
}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/digitalspaghetti.password.js")" type="text/javascript"></script>

<script type="text/javascript">

    var AvailableEmail = 0;
    var AvailableUsr = 0;

    function CheckAvailability() {

        if ($('#UserName').val() != "") {
            $.post("@HomeDir/Account/CheckusrNameAvailable", { UserName: $('#UserName').val() },
	        function (data) {
	            var strOpt = data.split('?');
	            var avail = strOpt[0];
	            if (avail == "0") {
	                AvailableUsr = 0;
	                $('#is-userName-available').find('span').html("User Name Available");
	                $('#is-userName-available').addClass('good').removeClass('error');
	            }
	            else {
	                AvailableUsr = 1;
	                $('#is-userName-available').find('span').html("User Name Taken");
	                $('#is-userName-available').removeClass('good');
	                $('#DivSuggestion').removeClass('hide');
	                var strhtml = "<p><em>May we suggest you try?</em></p>";
	                strhtml += "<ol>";
	                for (i = 1; i < strOpt.length; i++) {
	                    strhtml += "<li><a href='#' onclick='setText(&#39;" + strOpt[i] + "&#39;); CheckAvailability(); ' >" + strOpt[i] + "</a></li>";
	                }
	                strhtml += "</ol>";
	                $('#DivSuggestion').html(strhtml);
	            }
	        });
        }
    }

    function CheckEmailAvailability() {
        if ($('#email').val() != "") {
            $.post("@HomeDir/Account/CheckEmailAvailable", { UserName: $('#email').val() },
	        function (data) {

	            if (data == "0") {
	                AvailableEmail = 0;
	                $('#is-email-available').find('span').html("Email Available");
	                $('#is-email-available').addClass('good'); //.removeClass('error');
	            }
	            else {
	                AvailableEmail = 1;
	                $('#is-email-available').find('span').html("Email Taken");
	                $('#is-email-available').removeClass('good');

	            }
	        });
        }
    }
    function setText(data) {
        $('#UserName').val(data);
    }
    function Validatefunc() {
        if (AvailableEmail == 1 || AvailableUsr == 1) {
            alert("Please correct the errors on page");
          
            return false;
        }
        return true;
    }

    $(document).ready(function () {
        $('#password').pstrength();
 
    });

 </script>

 

@using SSB.Web.Mvc.Html
@using (Html.BeginForm("", "home", FormMethod.Post, new { enctype = "multipart/form-data", action = "" }))
{
    @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
    <div class="grid_6 form-bg" id="wiwi-sign-up">  
    
        <h5>Create your WiWi account</h5>

            <div class="editor-label">    
                <label class="Firstname" for="Firstname">First Name</label>                    
                @Html.TextBoxFor(m => m.Firstname, new { @placeholder = "First Name" }) 

                    <div class="helper-tip">
                     @Html.ValidationMessageFor(m => m.Firstname) 
                    </div>
                
            </div>
    
            <div class="editor-label"> 
                <label class="Lastname" for="Lastname">Last Name</label>                           
                @Html.TextBoxFor(m => m.Lastname, new { @placeholder = "Last Name" })
                 <div class="helper-tip">
                     @Html.ValidationMessageFor(m => m.Lastname) 
                    </div>
            </div>
    
            <div class="editor-label">
                <label class="email" for="email">Email</label>  
                @Html.TextBoxFor(m => m.email, new { @placeholder = "Your Email Address", @onblur = " CheckEmailAvailability();" })
                 <div class="helper-tip" id="is-email-available">
                     @Html.ValidationMessageFor(m => m.email) 
                    </div>        
            </div>
        
            <div class="editor-label">    
                <label class="UserName" for="UserName">User Name</label> 
                @Html.TextBoxFor(m => m.UserName, new { @placeholder = "Your User Name", @onblur = "CheckAvailability();" })
                <div class="helper-tip" id="is-userName-available">
                    @Html.ValidationMessageFor(m => m.UserName) 
                </div> 
            </div>

          	<div id="DivSuggestion" class="hide">
            
            </div>  
                     
            <div class="editor-label">

                <label class="password" for="password">Password</label> 
                @Html.PasswordFor(m => m.Password, new { @placeholder = "Your Password", @class = "password" })
                <div class="helper-tip" id="afterThis"> 
                @Html.ValidationMessageFor(m => m.Password)
                </div>
            </div>

            <div class="captcha editor-label">
            
                @Html.MvcCaptcha()
                <label class="CaptchaValue" for="CaptchaValue">Captcha </label> 
                @Html.TextBoxFor(m => m.CaptchaValue, new { @placeholder = "Enter Captcha Letters" })

                @Html.ValidationMessageFor(m => m.CaptchaValue)
            
            </div>
            
            <input type="submit" id="submit-button" onclick  ="javascript:return Validatefunc();" value="Register" /> 
  
	        <div class="clear"></div>

    </div>
}

<script type="text/javascript">
    // 'Flying' Labels
    $(document).ready(function () {
        $('.form-bg .editor-label label').css('display', 'none');

        $('input').focus(function () {
            var theId = $(this).attr('id');
            $('label.' + theId).fadeIn('fast');
        });

        $('input').blur(function () {
            var theId = $(this).attr('id');
            $('label.' + theId).fadeOut('medium');
        });

    });

</script>
    
  